<template>
  <view class="container">
    <view class="upload-section">
      <text class="title">文档上传</text>
      <text class="subtitle">上传你的文档以便进行智能问答</text>
    </view>
    <view class="form-section">
      <view class="form-group">
        <label for="documentTitle" class="label">文档标题：</label>
        <input
          id="documentTitle"
          class="input"
          type="text"
          placeholder="请输入文档标题"
          v-model="documentTitle"
        />
      </view>
      <view class="form-group">
        <label for="documentSource" class="label">文档来源（可选）：</label>
        <input
          id="documentSource"
          class="input"
          type="text"
          placeholder="请输入文档来源"
          v-model="documentSource"
        />
      </view>
      <view class="form-group">
        <label for="fileUpload" class="label">选择文件：</label>
        <button id="fileUpload" class="upload-button">
          点击选择文件或拖拽到此处<br />支持格式：TXT, MD, PDF, DOC, DOCX, PPT,
          PPTX, XLS, XLSX, PNG, JPG/JPEG
        </button>
      </view>
      <button @click="uploadDocument" class="submit-button">上传文档</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const documentTitle = ref("");
const documentSource = ref("");
const selectedFile = ref(null);

const chooseFile = () => {
  uni.chooseFile({
    count: 1,
    type: ["file"],
    extension: [
      "txt",
      "md",
      "pdf",
      "doc",
      "docx",
      "ppt",
      "pptx",
      "xls",
      "xlsx",
      "png",
      "jpg",
      "jpeg",
    ],
    success: (res) => {
      selectedFile.value = res.tempFiles[0];
    },
    fail: (err) => {
      console.error("选择文件失败", err);
    },
  });
};

const uploadDocument = () => {
  if (!selectedFile.value) {
    uni.showToast({
      title: "请选择文件",
      icon: "none",
    });
    return;
  }
  // 这里可以添加上传文件的逻辑
  uni.showToast({
    title: "上传成功",
    icon: "success",
  });
};
</script>

<style>
.container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.upload-section {
  background-color: #6a5acd;
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 18px;
  display: block;
}

.form-section {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  height: 60vh;
}

.form-group {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.input {
  width: 90%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.upload-button {
  padding: 12px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  width: 90%;
  color: #666;
}

.upload-button:active {
  color: #000;
}

.submit-button {
  width: 100%;
  padding: 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}
</style>
